<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高德地图+ol</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>
  <style>
    #map {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  </style>
</head>


<body>
<div id="map"></div>
<script type="text/javascript">
  //实例化Map对象，用于加载地图
  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  });


  var tiled = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://localhost:8999/geoserver/wang/wms',
      params: {
        "LAYERS": 'wang:entity_polygon',
      },
      serverType: 'geoserver'
    })
  });
  var map = new ol.Map({
    layers: [gaodeMapLayer],
    view: new ol.View({
      center: [120,30],
      projection: 'EPSG:4326',
      zoom: 10
    }),
    target: 'map'
  });

  map.addLayer(tiled);
</script>
</body>

</html>
